<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:我的收藏页面
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->
<template>
	<view class="container">
		<!-- 顶部开始 -->
		<view class="head shadow">
			<view class="left-wrapper" @tap="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="title_wrap">我的收藏</view>
			<view class="seach" @click="seach">
				<image src="/static/home/seach.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 顶部结束 -->
		<scroll-view scroll-y="true" class="content" @scrolltolower="onLoadMore" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
			<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
			<view>
				<video-page class="video-page" :videoList="videoList" :page="page" type="collection"></video-page>
			</view>
			<view :style="{'textAlign':'center'}" class="loading">
				<text v-if="!isMore">暂无更多数据</text>
				<text v-if="isMore">正在加载...</text>
			</view>
			<advert-page v-if="advert!=undefined&&advert.length>2" :src="advert[2].img" :showAd="showAd" :adUrl="advert[2].ad_url"
			 :openType="advert[2].open_type" @close="closeAd"></advert-page>
		</scroll-view>
	</view>
</template>

<script>
	// 引入下拉刷新
	import refresh from '@/components/refresh/refresh.vue';
	import videoPage from "@/components/video/video-page.vue"
	import advertPage from "@/components/advert/advert-page.vue"
	
	export default {
		components: {
			videoPage,
			refresh,
			advertPage
		},
		data() {
			return {
				showAd: true,
				sysheight: 0,
				swiperHeight: 0,
				active: 0,
				page: 1,
				videoList: [],
				isMore: true,
				loadmore: false
			}
		},
		created() {
			this.sysheight = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				this.refresh();
			},
			changeTab(type) {
				this.active = type;
			},
			scrolltop() {
				uni.startPullDownRefresh()
			},
			changeCurrent(e) {
				this.active = e.detail.current;
			},
			seach() {
				uni.navigateTo({
					url: '/pages/index/user/category-search/category-search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			back() {
				uni.navigateBack()
			},
			onLoadMore() {
				if (this.isMore) {
					this.loadmore = true;
					// 初始化视频列表
					this.$api.videoList({
						'type': 'collection',
						'page': ++this.page
					}).then(res => {
						uni.stopPullDownRefresh();
						if (res.data.code == 0) {
							this.videoList = this.videoList.concat(res.data.data);
							this.$store.commit("setVideoList", this.videoList);
						} else {
							this.isMore = false;
						}
						this.loadmore = false;
					}).catch(res => {
						this.isMore = false;
						this.loadmore = false;
						uni.stopPullDownRefresh();
						// 失败进行的操作
					})
				} else {
					this.loadmore = true;
					uni.showToast({
						title: '暂无更多数据'
					});
				}
			},
			refresh() {
				this.showAd = true;
				this.page = 1;
				// 初始化视频列表
				this.$api.videoList({
					'type': 'collection',
					'page': this.page
				}).then(res => {
					this.$refs.refresh.endAfter() //刷新结束调用
					if (res.data.code == 1) {
						uni.showToast({
							title: '暂无数据',
							icon: "none"
						});
						this.isMore = false;
						this.loadmore = false;
					}
					this.videoList = res.data.data;
					if (res.data.data.length < 20 || (res.data.data)[0] == undefined) {
						this.loadmore = false;
						this.isMore = false;
					}
				}).catch(res => {
					this.isMore = false;
					this.loadmore = false;
					this.$refs.refresh.endAfter() //刷新结束调用
					uni.showToast({
						title: res.msg
					});
				})
			},
			closeAd() {
				this.showAd = false;
			}
		},
		created() {
			// 最热视频列表初始化获取
			this.$api.videoList({
				'type': 'collection',
				'page': this.page
			}).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: '暂无数据',
						icon: "none"
					});
					this.isMore = false;
					this.loadmore = false;
				}
				// 获得数据 
				this.videoList = res.data.data;

				if (res.data.data.length < 20 || (res.data.data)[0] == undefined) {
					this.loadmore = false;
					this.isMore = false;
				}
				//this.onLoadMore();
			}).catch(res => {
				this.isMore = false;
				this.loadmore = false;
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				// 失败进行的操作
			})
		},
		computed: {
			advert() {
				return this.$store.state.advert.page
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba($color: #000000, $alpha: .05);
	}
	
	.loading {
		width: 750rpx;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.head {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		padding: var(--status-bar-height) 24rpx 0;
		background: $uni-bg-color;
		display: flex;
		align-items: center;
		height: calc(var(--status-bar-height) + 88rpx);
		box-sizing: border-box;
		z-index: 999;
	}

	.left-wrapper {
		width: 50rpx;
	}

	.content {
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		right: 0;
		left: 0;
		bottom: 0;
	}

	.shadow {
		box-shadow: 0 1px 6px #ccc;
	}

	.title_wrap {
		flex: 1;
		text-align: center;
	}

	.seach {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;
		image {
			width: 35rpx;
			height: 25rpx;
		}
	}
	
	.container {
		height: 100vh;
	}
</style>
